<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="600px"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="品类类型" prop="categoryType">
        <el-select v-model="form.categoryType" placeholder="请选择品类类型" style="width: 100%">
          <el-option label="设备" :value="0" />
          <el-option label="业务系统" :value="1" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="品类名称" prop="categoryName">
        <el-input v-model="form.categoryName" placeholder="请输入品类名称" />
      </el-form-item>
      
      <el-form-item label="品类编码" prop="categoryKey">
        <el-input v-model="form.categoryKey" placeholder="请输入品类编码" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 组件属性
interface Props {
  visible: boolean
  title: string
  data?: any
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  title: '添加品类',
  data: null
})

// 组件事件
const emit = defineEmits<{
  'update:visible': [value: boolean]
  'confirm': [data: any]
}>()

// 响应式数据
const dialogVisible = ref(false)
const formRef = ref()

// 表单数据
const form = ref({
  categoryId: '',
  categoryType: 0,
  categoryName: '',
  categoryKey: ''
})

// 表单验证规则
const rules = {
  categoryType: [
    { required: true, message: '请选择品类类型', trigger: 'change' }
  ],
  categoryName: [
    { required: true, message: '请输入品类名称', trigger: 'blur' }
  ],
  categoryKey: [
    { required: true, message: '请输入品类编码', trigger: 'blur' }
  ]
}

// 处理表单数据，将空字符串转换为undefined
const processFormData = (data: any) => {
  const processed = { ...data }
  // 将空字符串转换为undefined，避免select组件显示选择状态
  if (processed.categoryType === '') processed.categoryType = undefined
  return processed
}

// 重置表单
const resetForm = () => {
  form.value.categoryId = ''
  form.value.categoryType = undefined
  form.value.categoryName = ''
  form.value.categoryKey = ''
  formRef.value?.clearValidate()
}

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal
  },
  { immediate: true }
)

// 监听data变化
watch(
  () => props.data,
  (newVal) => {
    if (newVal) {
      // 处理空字符串转换为undefined
      const processedData = processFormData(newVal)
      Object.assign(form.value, processedData)
    }
  },
  { immediate: true, deep: true }
)

// 监听弹窗显示状态
watch(
  () => props.visible,
  (newValue) => {
    if (newValue && !props.data) {
      // 新增模式下重置表单
      resetForm()
    }
  }
)



// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    emit('confirm', { ...form.value })
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 取消
const handleCancel = () => {
  handleClose()
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
  // 只在新增模式下重置表单，编辑模式下保留数据
  if (!props.data) {
    resetForm()
  }
  // 清除验证状态
  formRef.value?.clearValidate()
}



// 暴露方法给父组件
defineExpose({
  resetForm
})
</script>

<style scoped>
.icon-uploader .icon {
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 4px;
}

.icon-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.icon-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.icon-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
}
</style>